<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>编辑资料 - 校园二手市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun",
            "Times New Roman", serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 顶部导航栏 */
        .register-header {
            background-color: #2c3e50;
            color: white;
            padding: 25px 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .register-header .container {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo h1 {
            font-size: 2.8rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            min-width: 400px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .logo i.fa-recycle {
            font-size: 3.2rem;
            margin-right: 20px;
            color: #e74c3c;
        }

        /* 主内容区 - 双列布局 */
        .register-main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 5%;
        }

        .register-container {
            background-color: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1000px;
            position: relative;
            overflow: hidden;
        }

        .register-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 100%;
            background: linear-gradient(to bottom, #e74c3c, #3498db);
        }

        h2 {
            text-align: center;
            margin-bottom: 40px;
            color: #2c3e50;
            font-size: 2rem;
            position: relative;
            padding-bottom: 20px;
        }

        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(to right, #e74c3e, #3498db);
        }

        /* 双列表单布局 */
        .form-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

        label i {
            margin-right: 10px;
            color: #7f8c8d;
            font-size: 1.1rem;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"] {
            width: 100%;
            padding: 15px 20px 15px 45px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 1rem;
            transition: all 0.3s;
            background-color: #f9f9f9;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus {
            border-color: #e74c3c;
            outline: none;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
            background-color: white;
        }

        .input-icon {
            position: absolute;
            left: 15px;
            top: 52px;
            color: #7f8c8d;
            font-size: 1.2rem;
        }

        /* 底部全宽元素 */
        .form-footer {
            grid-column: 1 / -1;
            margin-top: 20px;
        }

        button[type="submit"] {
            width: 100%;
            padding: 10px;
            background: linear-gradient(to right, #2ecc71, #27ae60);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        button[type="submit"]:hover {
            background: linear-gradient(to right, #27ae60, #2ecc71);
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .error-message,
        .success-message {
            grid-column: 1 / -1;
            width: 100%;
            text-align: center;
            margin: 15px 0;
            font-size: 1rem;
            font-weight: 600;
            padding: 12px;
            border-radius: 8px;
        }

        .error-message {
            color: #e74c3c;
            background-color: rgba(231, 76, 60, 0.1);
            border-left: 5px solid #e74c3c;
        }

        .success-message {
            color: #27ae60;
            background-color: rgba(39, 174, 96, 0.1);
            border-left: 5px solid #27ae60;
        }

        .login-link {
            grid-column: 1 / -1;
            width: 100%;
            text-align: center;
            margin-top: 15px;
        }

        .login-link a {
            display: inline-block;
            padding: 12px;
            width: 100%;
            background-color: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            color: #3498db;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }

        .login-link a:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }

        .login-link i {
            margin-right: 8px;
        }

        .footer {
            text-align: center;
            padding: 25px;
            color: #7f8c8d;
            font-size: 1rem;
            background-color: #f0f0f0;
        }

        .password-mismatch {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 8px;
            display: none;
            padding: 8px;
            background-color: rgba(231, 76, 60, 0.1);
            border-radius: 4px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-columns {
                grid-template-columns: 1fr;
            }

            .register-container {
                padding: 40px 30px;
            }

            h2 {
                font-size: 1.8rem;
                margin-bottom: 30px;
            }
        }

        @media (max-width: 480px) {
            .register-container {
                padding: 30px 20px;
            }

            h2 {
                font-size: 1.6rem;
            }

            input[type="text"],
            input[type="password"],
            input[type="email"] {
                padding: 14px 15px 14px 40px;
            }

            .input-icon {
                left: 12px;
                top: 40px;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="register-header">
    <div class="container">
        <div class="logo">
            <a href="${pageContext.request.contextPath}/home"><i class="fas fa-recycle"></i></a>
            <a href="${pageContext.request.contextPath}/home"><h1>校园二手市场</h1></a>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="register-main">
    <div class="register-container">
        <h2><i class="fas fa-user-plus"></i> 信息修改 </h2>
        <c:if test="${not empty trueMsg}">
            <div class="success-message">${trueMsg}</div>
        </c:if>
        <c:if test="${not empty errorMsg}">
            <div class="error-message">${errorMsg}</div>
        </c:if>
        <form id="registerForm" action="${pageContext.request.contextPath}/update" method="post"
              onsubmit="return validateForm()">
            <div class="form-columns">
                <input type="hidden" name="id" value="${user.userId}">
                <!-- 第一列 -->
                <div class="form-group">
                    <label for="username"><i class="fas fa-user"></i> 用户名:</label>
                    <i class="fas fa-user input-icon"></i>
                    <input type="text" id="username" name="username" required
                           placeholder="4-20位字母、数字或下划线"
                           pattern="[a-zA-Z0-9_]{4,20}"
                           title="用户名应为4-20位字母、数字或下划线"
                           value="${user.username}">
                </div>

                <div class="form-group">
                    <label for="realName"><i class="fas fa-id-card"></i> 真实姓名:</label>
                    <i class="fas fa-id-card input-icon"></i>
                    <input type="text" id="realName" name="realName" required
                           placeholder="请输入真实姓名" value="${user.realName}">
                </div>

                <div class="form-group">
                    <label for="password"><i class="fas fa-lock"></i> 密码:</label>
                    <i class="fas fa-lock input-icon"></i>
                    <input type="password" id="password" name="password" required
                           placeholder="至少6位，必须包含字母和数字"
                           pattern="^(?=.*[A-Za-z])(?=.*\d).{6,}$"
                           title="密码必须包含至少一个字母和一个数字，长度至少6位"
                           value="${user.password}"
                           oninput="checkPassword()">
                </div>

                <!-- 第二列 -->
                <div class="form-group">
                    <label for="studentId"><i class="fas fa-graduation-cap"></i> 学号:</label>
                    <i class="fas fa-graduation-cap input-icon"></i>
                    <input type="text" id="studentId" name="studentId" value="${user.studentId}" required
                           placeholder="请输入学号"
                           pattern="[0-9]{8,12}"
                           title="学号应为8-12位数字">
                </div>

                <div class="form-group">
                    <label for="confirmPassword"><i class="fas fa-lock"></i> 确认密码:</label>
                    <i class="fas fa-lock input-icon"></i>
                    <input type="password" id="confirmPassword" name="confirmPassword" required
                           placeholder="请再次输入密码" value="${user.password}">
                    <div id="passwordError" class="password-mismatch">两次输入的密码不一致！</div>
                </div>

                <div class="form-group">
                    <label for="email"><i class="fas fa-envelope"></i> 邮箱:</label>
                    <i class="fas fa-envelope input-icon"></i>
                    <input type="email" id="email" name="email" required
                           placeholder="请输入有效邮箱地址"
                           pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                           title="请输入有效的邮箱地址"
                           onblur="checkEmail()" value="${user.email}">
                </div>

                <!-- 底部全宽元素 -->
                <div class="form-group form-footer">
                    <label for="phone"><i class="fas fa-phone"></i> 手机号:</label>
                    <i class="fas fa-phone input-icon"></i>
                    <input type="text" id="phone" name="phone"
                           placeholder="请输入手机号(可选)"
                           pattern="1[3-9]\d{9}"
                           title="请输入有效的手机号" value="${user.phone}">
                </div>

                <div class="form-group form-footer">
                    <label for="address"><i class="fas fa-map-marker-alt"></i> 收货地址:</label>
                    <i class="fas fa-map-marker-alt input-icon"></i>
                    <input type="text" id="address" name="address"
                           placeholder="请输入收货地址"
                           maxlength="100"
                           pattern=".{5,100}"
                           title="请填写5-100个字符的详细地址"
                           required
                           value="${user.address}">
                </div>

                <div class="form-footer">
                    <button type="submit"><i class="fas fa-user-plus"></i>&nbsp;&nbsp;修改</button>
                </div>

                <div class="login-link">
                    <a href="${pageContext.request.contextPath}/userCenter"><i class="fas fa-sign-in-alt"></i>返回</a>
                </div>
            </div>
        </form>
    </div>
</main>

<footer class="footer">
    <div class="container">
        <p>&copy; 2025 CB 校园二手市场 版权所有</p>
    </div>
</footer>

<script>
    // 密码验证函数
    function checkPassword() {
        const password = document.getElementById("password").value;
        const errorElement = document.getElementById("passwordError");
        const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{6,}$/;

        if (password && !passwordRegex.test(password)) {
            errorElement.style.display = "block";
            errorElement.textContent = "密码必须包含字母和数字，至少6位长度";
            return false;
        } else {
            errorElement.style.display = "none";
            return true;
        }
    }

    // 邮箱验证函数
    function checkEmail() {
        const email = document.getElementById("email").value;
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        if (email && !emailRegex.test(email)) {
            return false;
        }
        return true;
    }

    // 表单提交验证
    function validateForm() {
        // 验证密码一致性
        const password = document.getElementById("password").value;
        const confirmPassword = document.getElementById("confirmPassword").value;
        const passwordError = document.getElementById("passwordError");

        if (password !== confirmPassword) {
            passwordError.style.display = "block";
            passwordError.textContent = "两次输入的密码不一致！";
            return false;
        }
        passwordError.style.display = "none";

        // 验证密码格式
        if (!checkPassword()) return false;

        // 验证邮箱格式
        if (!checkEmail()) {
            alert("请输入有效的邮箱地址");
            return false;
        }

        return true;
    }

    // 实时检查密码一致性
    document.getElementById("confirmPassword").addEventListener('input', function () {
        const password = document.getElementById("password").value;
        const confirmPassword = this.value;
        const errorElement = document.getElementById("passwordError");

        if (password !== confirmPassword && confirmPassword.length > 0) {
            errorElement.style.display = "block";
            errorElement.textContent = "两次输入的密码不一致！";
        } else {
            errorElement.style.display = "none";
        }
    });
</script>
</body>
</html>